<template>
    <el-card class="box-card" style="width:80%;margin:20px 0px 0px 20px;">
        <div v-for="(value, index) in cardDate.records " :value="value" :key="value.id" :index="index"
            style="display: inline-block;width: 25%;margin:20px 0px 0px 65px;font-size: 13px;">
            <el-card>
                <div slot="header" class="clearfix" style="display:flex;margin-left: 10px;">
                    <span :value="value.notes" style="display:flex;align-self: center;">{{ value.notes }}编码</span>
                    <el-button style="width: 30%;" id="bj" type="primary" @click="bj(value)"
                        icon="el-icon-edit">编辑</el-button>
                </div>
                <div class="zd">字母前缀:{{ value.rulesLetter }}</div>
                <div class="zd">时间日期:{{ value.rulesTimeType }}</div>
                <div class="zd">数字后缀:{{ value.rulesNum }}</div>
                <div class="zd">编号预览:{{ value.rulesLetter }}{{ value.rulesTimeType }}{{ value.rulesNum }}</div>
            </el-card>
        </div>

        <el-dialog title="编辑设备编码" :visible.sync="dialogFormVisible" style="width: 60%;margin-left: 320px;">
            <el-form ref="formEnCoding" :model="form" label-width="80px">
                <hr>
                <el-form-item label="字母前缀" style="width: 72%;">
                    <el-input v-model="form.rulesLetter"></el-input>
                </el-form-item>
                <el-form-item label="时间格式">
                    <el-select v-model="form.rulesTimeType" placeholder="请选择">
                        <el-option label="yyyy" value="yyyy"></el-option>
                        <el-option label="yyyymm" value="yyyymm"></el-option>
                        <el-option label="yyyymmdd" value="yyyymmdd"></el-option>
                        <el-option label="yyyymmddhhmm" value="yyyymmddhhmm"></el-option>
                        <el-option label="yyyymmddhhmmss" value="yyyymmddhhmmss"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数字后缀">
                    <el-select v-model="form.rulesNum" placeholder="请选择">
                        <el-option label="001" value="001"></el-option>
                        <el-option label="0001" value="0001"></el-option>
                        <el-option label="00001" value="00001"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="编号预览">
                    <div style="display:flex;"><el-input style="width: 65%;" v-model="ylval"></el-input><el-button
                            type="success" style="margin-left:48px;width:80px;height: 40px;"
                            @click="yl()">预览</el-button></div>
                </el-form-item>
                <hr>
                <el-form-item style="margin-left: 190px;">
                    <el-button type="primary" style="background-color: white;color:black;border: none;"
                        @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
    </el-card>
</template>

<script>
import axios from 'axios';
import { codingConfig } from '@/api/set/coding';
export default {
    mounted() {
        this.init();
    },
    methods: {
        onSubmit() {
            codingConfig('update', this.form).then(res => {
                console.log(res)
                this.dialogFormVisible = false
            })
        },
        bj(val) {

            this.dialogFormVisible = true;
            this.form = val;
            console.log(this.form);
        },
        yl() {

            this.ylval = this.form.rulesLetter + this.form.rulesTimeType + this.form.rulesNum;
        },
        init() {
            axios.get('http://localhost:9286/rules/deviceRulesList', { params: { page: this.page, size: this.size, condition: this.ss } }).then(res => {

                console.log(res.data);
                for (var i = 0; i < res.data.records.length; i++) {
                    if (res.data.records[i].rulesTimeType == 0) {
                        res.data.records[i].rulesTimeType = "yyyy"
                    } else if (res.data.records[i].classType == 1) {
                        res.data.records[i].rulesTimeType = "yyyymm"
                    } else if (res.data.records[i].rulesTimeType == 2) {
                        res.data.records[i].rulesTimeType = "yyyymmdd"
                    } else if (res.data.records[i].rulesTimeType == 3) {
                        res.data.records[i].rulesTimeType = "yyyymmddhhmm"
                    } else if (res.data.records[i].rulesTimeType == 4) {
                        res.data.records[i].rulesTimeType = "yyyymmddhhmmss"
                    } else {
                        res.data.records[i].rulesTimeType = "null"
                    }
                    if (res.data.records[i].rulesNum == 0) {
                        res.data.records[i].rulesNum = "001"
                    } else if (res.data.records[i].rulesNum == 1) {
                        res.data.records[i].rulesNum = "0001"
                    } else {
                        res.data.records[i].rulesNum = "00001"
                    }
                }
                this.cardDate = res.data;

            })
        }
    },
    data() {
        return {
            ylval: '',
            form: {},
            formEnCoding: [],
            dialogFormVisible: false,
            cardDate: [

            ]
        }
    }
}
</script>

<style>
.zd {
    margin: 10px 0px 0px 10px;
}

#bj {

    font-size: 12px;
    border: 0px;
    margin-left: 82px;
    color: blue;
    background-color: white;
}

.el-card__header {
    padding: 0px 0px;
    border-bottom: 1px solid #EBEEF5;
    box-sizing: border-box;
}

.el-dialog__body {
    padding: 2px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
</style>